<template>
  <!-- 黑名单 -->
  <div id="my-calendar">

    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/statistics/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>统计分析</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <el-calendar class="calendar-box">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
  </div>

</template>
<script>
export default {
    name: 'my-calendar',
    data () {
        return {}
    },
    methods: {},
    mounted () {
    }
}
</script>

<style scoped>
#my-calendar {
  width: 100%;
  height: auto;
}

.div-breadcrumb {
  width: auto;
  margin: 20px 30px 0px 30px;
}

.calendar-box{
  margin: 5px 30px 0px 30px;
  /* background-color: #aa55ff; */
  /* color: white; */
}
</style>
